<template>
	<sc-dialog
		v-model="visible"
		show-fullscreen
		:title="titleMap[mode]"
		class="column-dialog"
		width="750px"
		@close="close"
	>
		<el-form
			ref="formRef"
			label-width="100px"
			:model="formData"
			:rules="rules"
		>
			<el-tabs class="tabs-pages" stretch>
				<el-tab-pane label="基础设置" name="0" lazy>
					<el-form-item label="活动名称" prop="name">
						<el-input
							v-model="formData.name"
							placeholder="请输入游戏名称"
							:maxlength="50"
							show-word-limit
							clearable
							:style="{ width: '100%' }"
						></el-input>
					</el-form-item>
					<el-form-item label="状态" prop="status" required>
						<el-switch v-model="formData.status"></el-switch>
					</el-form-item>
					<el-form-item label="游戏说明" class="edior">
						<sc-editor
							v-model="formData.summary"
							placeholder="请输入"
							:height="200"
						></sc-editor>
					</el-form-item>
				</el-tab-pane>
				<el-tab-pane label="配置设置" name="1" lazy>
					<el-scrollbar height="400px">
						<el-form-item label="一般">
							<sc-form-table
								v-model="formData.configRule[0].rule"
								:addTemplate="addTemplate"
								drag-sort
								placeholder="暂无数据"
							>
								<el-table-column
									prop="name"
									label="最小数"
									width="120"
								>
									<template #default="scope">
										<el-input
											v-model="scope.row.min"
											placeholder="请输入最小数"
										></el-input>
									</template>
								</el-table-column>
								<el-table-column
									prop="ratio"
									label="最大数"
									width="120"
								>
									<template #default="scope">
										<el-input
											class="ratio"
											v-model="scope.row.max"
											placeholder="请输入最大数"
										>
										</el-input>
									</template>
								</el-table-column>
								<el-table-column
									prop="code"
									label="积分值"
									width="180"
								>
									<template #default="scope">
										<el-input
											v-model="scope.row.point"
											placeholder="请输入积分值"
										></el-input>
									</template>
								</el-table-column>
							</sc-form-table>
						</el-form-item>
						<el-form-item label="中等">
							<sc-form-table
								v-model="formData.configRule[1].rule"
								:addTemplate="addTemplate"
								drag-sort
								placeholder="暂无数据"
							>
								<el-table-column
									prop="name"
									label="最小数"
									width="120"
								>
									<template #default="scope">
										<el-input
											v-model="scope.row.min"
											placeholder="请输入最小数"
										></el-input>
									</template>
								</el-table-column>
								<el-table-column
									prop="ratio"
									label="最大数"
									width="120"
								>
									<template #default="scope">
										<el-input
											class="ratio"
											v-model="scope.row.max"
											placeholder="请输入最大数"
										>
										</el-input>
									</template>
								</el-table-column>
								<el-table-column
									prop="code"
									label="积分值"
									width="180"
								>
									<template #default="scope">
										<el-input
											v-model="scope.row.point"
											placeholder="请输入积分值"
										></el-input>
									</template>
								</el-table-column>
							</sc-form-table>
						</el-form-item>
						<el-form-item label="困难">
							<sc-form-table
								v-model="formData.configRule[2].rule"
								:addTemplate="addTemplate"
								drag-sort
								placeholder="暂无数据"
							>
								<el-table-column
									prop="name"
									label="最小数"
									width="120"
								>
									<template #default="scope">
										<el-input
											v-model="scope.row.min"
											placeholder="请输入最小数"
										></el-input>
									</template>
								</el-table-column>
								<el-table-column
									prop="ratio"
									label="最大数"
									width="120"
								>
									<template #default="scope">
										<el-input
											class="ratio"
											v-model="scope.row.max"
											placeholder="请输入最大数"
										>
										</el-input>
									</template>
								</el-table-column>
								<el-table-column
									prop="code"
									label="积分值"
									width="180"
								>
									<template #default="scope">
										<el-input
											v-model="scope.row.point"
											placeholder="请输入积分值"
										></el-input>
									</template>
								</el-table-column>
							</sc-form-table>
							<el-alert
								class="cur-alert"
								show-icon
								title="难度：设置最小到最大之间，数量获得的相应积分值"
								type="warning"
								:closable="false"
							/>
						</el-form-item>
					</el-scrollbar>
				</el-tab-pane>
			</el-tabs>
		</el-form>

		<template #footer>
			<el-button @click="close">取 消</el-button>
			<el-button :loading="isSaveing" type="primary" @click="save">
				确 定
			</el-button>
		</template>
	</sc-dialog>
</template>
<script>
import { defineAsyncComponent } from "vue";
const scEditor = defineAsyncComponent(() => import("@/components/scEditor"));
export default {
	emits: ["complete"],
	components: {
		scEditor,
	},
	data() {
		return {
			mode: "add",
			titleMap: {
				add: "新增",
				edit: "编辑",
			},
			addTemplate: {
				min: 0,
				max: 0,
				point: 0,
			},
			isSaveing: false,
			visible: false,
			formData: {
				id: 0,
				name: undefined,
				status: true,
				summary: undefined,
				configRule: [
					{ level: 1, rule: [] },
					{ level: 2, rule: [] },
					{ level: 3, rule: [] },
				],
			},
			rules: {},
		};
	},
	mounted() {},
	methods: {
		async open(row) {
			if (!row) {
				this.mode = "add";
			} else {
				this.mode = "edit";
				var res = await this.$API.carsgame.model.get(row.id);
				this.formData = res.data;
			}
			this.visible = true;
		},
		save() {
			this.$refs.formRef.validate(async (valid) => {
				if (valid) {
					this.isSaveing = true;
					let res = null;
					if (this.formData.id === 0) {
						res = await this.$API.carsgame.add.post(this.formData);
					} else {
						res = await this.$API.carsgame.update.put(
							this.formData
						);
					}
					this.isSaveing = false;
					if (res.code == 200) {
						this.$emit("complete");
						this.visible = false;
						this.$message.success("操作成功");
					} else {
						this.$alert(res.message, "提示", { type: "error" });
					}
				}
			});
		},
		close() {
			this.formData = {
				id: 0,
				name: undefined,
				status: true,
				summary: undefined,
				configRule: [
					{ level: 1, rule: [] },
					{ level: 2, rule: [] },
					{ level: 3, rule: [] },
				],
			};
			this.$refs.formRef.resetFields();
			this.visible = false;
		},
	},
};
</script>
<style>
.column-dialog .el-dialog__body {
	padding-top: 0px;
	padding-bottom: 0px;
}
.cur-alert {
	line-height: normal;
	margin-top: 10px;
	width: 96%;
}
</style>
